<template>
    <h2>所有订单</h2>
    <a-table :dataSource="all_orders" :columns="columns" rowKey="id">
      <template #promotion="{ record }">
        <text>{{ record.promotion.name }}</text>
      </template>
      <template #shop_list="{ record }">
        <div v-for="it in record.shop_list" :key="it">
            <text >{{ it.name }};</text>
        </div>
      </template>
      <template #action="{ record }">
        <a-button v-if="record.taken == 0" type="primary" @click="ensure(record)">确认取餐</a-button>
        <text v-if="record.taken == 1">已完成</text>
        <!-- <a-button type="primary" @click="deleteDish(record.food_id)" danger>删除</a-button> -->
        <!-- <text v-if="column.dataIndex == 'on_sale'">abc</text> -->
      </template>
    </a-table>
</template>

<script>
import axios from 'axios';

export default {
data() {
    return {
        shop_id: 0,
        all_orders: [],
        columns: [
            { title: '订单号', dataIndex: 'order_num', key: 'order_num', width: 100 },
            { title: '用户id', dataIndex: 'user_id', key: 'user_id', width: 100 },
            { title: '商店id', dataIndex: 'shop_id', key: 'shop_id', width: 100 },
            { title: '是否已取', dataIndex: 'taken', key: 'taken', width: 100, sorter: {
                    compare: (a, b) => a.taken - b.taken,
                    multiple: 2
                }
            },
            { title: '下单时间', dataIndex: 'order_time', key: 'order_time', width: 150, sorter: {
                    compare: (a, b) => new Date(a.order_time) - new Date(b.order_time),
                    multiple: 2
                }
            },
            // { title: '促销策略', dataIndex: 'promotion', key: 'promotion', width: 150  },
            { title: '促销策略', key: 'promotion', slots: { customRender: 'promotion' }, width: 150 },
            { title: '留言', dataIndex: 'remark_message', key: 'remark_message', ellipsis: true, width: 200 },
            { title: '总价', dataIndex: 'total', key: 'total', width: 100  },
            // { title: '商品列表', dataIndex: 'shop_list', key: 'shop_list', ellipsis: true  },
            { title: '商品列表', key: 'shop_list', slots: { customRender: 'shop_list' }, ellipsis: true },
            { title: '确认取餐', key: 'action', slots: { customRender: 'action' } },
        ]
    }
},

mounted: function() {

// 判断是否登录
    if (!this.$store.state.is_login)
    {
        alert("未登录，请先登录!")
       this.$router.push('/');
       return;
    }

    // 获取商店id
    this.shop_id = this.$store.state.shop_id;

    // 获取商店所有订单
    axios.get('/shop/getOrdersByShopId', {
        params: {
            shop_id: this.shop_id
        }
    }).then((res)=>{
        console.log('res.data: ', res.data);
        this.all_orders = res.data.order_list;
        let tmp_obj;
        // 将字符串转为json对象
        for (let index in this.all_orders)
        {
            // 将促销策略转为json对象
            tmp_obj = this.all_orders[index].promotion;
            console.log('tmp_obj1: ', tmp_obj);
            if (tmp_obj != 'null')
                this.all_orders[index].promotion = JSON.parse(tmp_obj);
            else
                this.all_orders[index].promotion = {name: '无'};

            // 将商品列表转为json对象
            tmp_obj = this.all_orders[index].shop_list;
            console.log('tmp_obj2: ', tmp_obj);
            if (tmp_obj != 'null' && tmp_obj != '')
                this.all_orders[index].shop_list = JSON.parse(tmp_obj);
            else
                this.all_orders[index].shop_list = [{name: '无'}];
        }
        console.log('all_orders: ', this.all_orders);
    });
    
},

methods: {
    ensure(record) {
        // console.log(record);
        // console.log(record.id);
        axios.get('/shop/ensureOrderByOrderId', {
            params: {
                order_id: record.order_id
            }
        }).then((res)=>{
            // console.log(res.data);
            if (res.data.msg == 'success') {
                record.taken = 1;
                alert('确认成功');
            }
        })
    }
}

}
</script>